<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-15 10:03:27
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2023-08-22 14:36:23
 * @Description:
 *
-->

<template>
<div class="orchestrate-visualized-template-ctn">
  <ScreenContainer class="container">
    <ScreenHeader class="header">
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
      />
      <div class="botton" @click="getList()"></div>
      <!-- <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button> -->
    </ScreenHeader>
    <ScreenMain class="main">
      <el-table
        class="common-table"
        :data="list"
        stripe
        :header-cell-style="{ height: '40px !important',color: '#60C8FF',background:'#1382C4 !important'}"
        :row-style="{background:'#00619A',color:'#FFFFFF'}"
        :cell-style="{height:'40px'}"
      >
        <el-table-column prop="id" label="ID" min-width="150" show-overflow-tooltip />
        <el-table-column prop="name" label="模板名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="desc" label="模板描述" min-width="80" show-overflow-tooltip />
        <el-table-column prop="createDate" label="创建时间" min-width="120" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope"> 
            <div class="detail"  @click="jumpTo(scope.row.id)">进入拓扑</div>
            <div class="line">&nbsp;|&nbsp;</div>
            <div class="delete" @click="delData(scope.row.id)">删除</div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </ScreenMain>
  </ScreenContainer>
</div>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import ScreenContainer from '@/components/Layout/ScreenContainer.vue'
import ScreenHeader from '@/components/Layout/ScreenHeader.vue'
import ScreenMain from '@/components/Layout/ScreenMain.vue'
import { getTemplateList,delTemplate } from '@/api/orchestrate'
export default {
  name: 'OrchestrateVisualizedList',
  components: {
    ScreenContainer,
    ScreenHeader,
    ScreenMain
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      list:[],
      searchKey:"",
      pageNum:1,
      pageSize:10,
      totalCount:80,
    }
  },
  created() {},
  mounted() {
    //this.getList()
  },
  methods: {
    getList() {
      let params = {
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getTemplateList(params).then(res => {
        this.list = res.data.data// 返回数据在res.data中
        this.totalCount = res.data.totalCount
      })
    },
        /**
     * @description: 切换页码
     * @description: 获取列表
     * @return {*}
     */
    changepage(val) { // 切换页码时
      this.pageNum = val
      this.getList()
    },
    /**
     * @description: 改变页面容量
     * @description: 获取角色列表
     * @return {*}
     */
    sizeChange(val) { // 切换页码时
      this.pageSize = val
      this.getList()
    },
    jumpTo(id){
      this.$router.push({
        path: '/orchestrate/visualized/index',
        query: {
          templateId: id,
        }
      })
    },
    delData(id){
      let params = {
        id:id
      }
      this.$confirm('确定删除该信息吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        delTemplate(params).then(res => {
          if(res.code=='200'){
            this.$message.success('删除成功')
            if (this.list.length === 1) {
              // 当前页只有一条数据时 删除完刷新上一页数据
              this.pageNum = Math.max(this.pageNum - 1, 1)
            }
            this.getList()
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.orchestrate-visualized-template-ctn {
  .botton{
    display: inline-block;
    position: relative;
    top:3px;
    left:30px;
    cursor: pointer;
    width: 90px;
    height: 40px;
    background: url('../../../../assets/imgs/common/button.png')no-repeat;
    background-size:100% 100% ;
  }
  .detail{
    cursor: pointer;
    position: relative;
    top:1px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #32C0FE;
  }
  .line{
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #32C0FE;
  }
  .delete{
    cursor: pointer;
    position: relative;
    top:1.5px;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #FF5691 ;
  }
}
</style>
